<template>
  <BasicContainer>
    <div style="text-align: center">
      <ElRow>
        <ElCol :span="24"><h2>聚合支付</h2></ElCol>
      </ElRow>

      <ElRow>
        <ElCol :span="24">
          <VueQrCode :text="msg" :options="options" />
        </ElCol>
      </ElRow>
      <ElRow>
        <ElCol :span="24"><h4>请使用微信或支付宝手机客户端扫一扫</h4></ElCol>
      </ElRow>
      <ElRow> 请勿大额支付，无法退还请知悉 2</ElRow>
      <ElRow>
        <ElRadio v-model="amount" label="1">0.01 元</ElRadio>
        <ElRadio v-model="amount" label="10">0.1 元</ElRadio>
        <ElRadio v-model="amount" label="100">1 元</ElRadio>
      </ElRow>
      <ElRow>
        <ElRadio v-model="type" label="0">聚合支付</ElRadio>
        <ElRadio v-model="type" label="1">普通模式</ElRadio>
      </ElRow>
    </div>
  </BasicContainer>
</template>

<script>
  import { request } from '@/http'
  import { getStore } from '@/util/store'

  const protocol = window.location.protocol
  const host = window.location.host

  export default {
    data() {
      return {
        type: '0',
        amount: '1',
        msg: 'NULL',
        options: {
          height: 300,
          width: 300
        }
      }
    },
    watch: {
      amount: function (amount) {
        this.getQr()
      },
      type: function (type) {
        this.getQr()
      }
    },
    created() {
      this.getQr()
    },
    methods: {
      getQr() {
        // 聚合支付模式 调用后端生成支付链接
        if (this.type === '0') {
          request({
            url: '/pay/goods/merge/buy',
            method: 'get',
            params: { amount: this.amount }
          }).then(res => {
            this.msg = res.data.params
          })
        } else {
          const TENANT_ID = getStore('tenantId') || '1'
          this.msg = `${protocol}//${host}/pay/goods/buy?amount=${this.amount}&TENANT-ID=${TENANT_ID}`
        }
      }
    }
  }
</script>
